<template>
  <div>
    <div class="btn">
      <p>
        <button class="el-icon-goods save" @click="saveExcel">保存</button>
        <button class="el-icon-magic-stick money">收费</button>
      </p>
    </div>
    <el-form
      :label-position="labelPosition"
      label-width="80px"
      :model="formLabelAlign"
      :rules="rules"
      class="container"
    >
      <el-form-item label="患者姓名" prop="name">
        <el-input v-model="formLabelAlign.name" style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="患者卡号" prop="number">
        <el-input v-model="formLabelAlign.number" style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="患者年龄" prop="age">
        <el-input v-model="formLabelAlign.age" style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="date" style="width: 280px" >
           <el-date-picker
            v-model="value2"
            type="datetime"
            placeholder="选择日期时间"
            align="right"
            :picker-options="pickerOptions"
            style="width: 280px">
          </el-date-picker>
      </el-form-item>
     
      <el-form-item label="性别" prop="sex">
        <el-input v-model="formLabelAlign.sex" style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="手机卡号" prop="phone">
        <el-input v-model="formLabelAlign.phone" style="width: 280px"></el-input>
      </el-form-item>
      <el-form-item label="证件号码" prop="idcard">
        <el-input v-model="formLabelAlign.idcard" style="width: 280px"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  methods:{
    saveExcel(){
      this.$emit('parentExcel');
    }
  },
  data() {
    return {
       pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: '',
      labelPosition: "top",
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      rules: {
        name: [{ required: true, message: "请输入患者姓名", trigger: "blur" }],
        number: [
          { required: true, message: "请输入患者卡号", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入患者年龄", trigger: "blur" }],
        // date: [{ required: true, message: "请输入出生日期", trigger: "blur" }],
        sex: [{ required: true, message: "请输入性别", trigger: "blur" }],
        phone: [{ required: true, message: "请输入电话号码", trigger: "blur" }],
        idcard: [
          { required: true, message: "请输入证件号码", trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style lang="less" scoped>
.btn {
  width: 100%;
  height: 100px;
  background-color: #fff;
  line-height: 100px;
  p {
    float: right;
    margin-right: 20px;
    .save {
      width: 100px;
      height: 28px;
      background-color: #666ee8;
      color: #fff;
      border-radius: 5px;
      margin-right: 20px;
      border: none;
    }
    .money {
      width: 100px;
      height: 28px;
      background-color: #ffc71c;
      color: #fff;
      border-radius: 5px;
      border: none;
    }
  }
}
.container {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  flex-wrap: wrap;
  .el-form-item {
    margin: 0 20px;
    margin-bottom: 10px;
  }
}
.el-input__inner{
  width: 300px;
}
</style>